<div class="form-group" data-bind="validationElement: connectionStringName">
    <label class="control-label">Name<i class="required"></i></label>
    <div class="flex-grow">
        <input class="form-control" placeholder="Enter a name for the connection string"
               data-bind="textInput: connectionStringName, enable: isNew, attr: { 'title': isNew() ? 'Enter any name of your choice for this connection string' : '' }" >
    </div>
</div>
<div class="form-group" data-bind="validationElement: factoryName">
    <label class="control-label">
        Factory
        <br />
        <br />
        <small id="js-sql-syntax" class="text-primary" data-bind="visible: factoryName">
            Syntax <i class="icon-help"></i>
        </small>
    </label>
    <div class="flex-grow">
        <button type="button" class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown" aria-expanded="false">
            <span data-bind="text: fullNameFor(factoryName()) || 'Select factory name'"></span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" data-bind="foreach: $data.constructor.sqlProviders">
            <li><a href="#" data-bind="text: $parent.fullNameFor(value), click: _.partial($parent.factoryName, value)"></a></li>
        </ul>
        <span class="help-block" data-bind="validationMessage: factoryName"></span>
        <div class="has-warning" data-bind="visible: factoryName() === 'MySql.Data.MySqlClient'">
            <div class="help-block">
                <i class="icon-warning"></i>
                <span>
                    This connector is deprecated. 
                    MySqlConnector will be used instead. 
                    Please update Factory to: MySqlConnector.MySqlConnectorFactory.
                </span>
            </div>
        </div>
        <div class="has-warning" data-bind="visible: factoryName() === 'System.Data.SqlClient'">
            <div class="help-block">
                <i class="icon-warning"></i>
                <span>
                    This connector is deprecated. 
                    Microsoft SqlClient will be used instead. 
                    Please update Factory to: Microsoft.Data.SqlClient.
                </span>
            </div>
        </div>
    </div>
</div>
<div class="form-group" data-bind="validationElement: connectionString">
    <label class="control-label">Connection string<i class="required"></i></label>
    <div class="flex-grow">
        <textarea class="form-control" rows="3" data-bind="textInput: connectionString, attr: { placeholder: factoryPlaceHolder(factoryName) }">
        </textarea>
    </div>
</div>
